<template>
  <vxe-modal title="申请单信息" v-model="showMapKeyApplicationForm" width="840" height="720"
             :before-hide-method="beforeHideMethod">
    <template>
      <el-descriptions title="服务信息列表" :column="1" labelClassName="descriptions-map-key-label-style" :colon="false">
      </el-descriptions>
      <div v-for="(item,index) in serviceDataList">
        <el-row style="margin-top: 10px;">
          <el-col :span="4" :push="1">
            {{item.resourceName}}
          </el-col>
          <el-col :span="5" :push="1">
            {{item.resourceId}}
          </el-col>
          <el-col :span="4" :push="1">
            {{item.resourceDescribe}}
          </el-col>
          <el-col :span="2" :push="1">
            管理员组
          </el-col>
          <el-col :span="3" :push="1">
            0311-8888888
          </el-col>
          <el-col :span="2" :push="1">
            管理员组
          </el-col>
        </el-row>
      </div>
<!--      <el-descriptions title="服务基本信息" :column="1" labelClassName="descriptions-map-key-label-style" :colon="false">-->
<!--        <div v-for="(item,index) in serviceDataList">-->
<!--          &lt;!&ndash;   服务基本信息     &ndash;&gt;-->
<!--          <el-descriptions-item label="服务名称:">{{ serviceData.resourceName }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="服务编号:">{{ serviceData.resourceId }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="服务描述:">{{ serviceData.resourceDescribe }}</el-descriptions-item>-->
<!--          &lt;!&ndash;   单位信息     &ndash;&gt;-->
<!--          <el-descriptions-item label="提供单位:">管理员组</el-descriptions-item>-->
<!--          <el-descriptions-item label="联系方式:">0311-8888888</el-descriptions-item>-->
<!--          <el-descriptions-item label="联系地址:">管理员组</el-descriptions-item>-->
<!--        </div>-->
<!--      </el-descriptions>-->
      <!--   申请单   -->
      <el-form :model="formData"
               :rules="ruleForm"
               ref="mapKeyForm"
               label-width="100px"
               label-suffix=":"
               class="demo-ruleForm">
        <div class="el-descriptions__header" style="padding-top: 10px">
          <div class="el-descriptions__title">申请信息</div>
          <div class="el-descriptions__extra"></div>
        </div>
        <el-form-item label="申请时长" prop="duration">
          <el-radio-group v-model="formData.duration">
            <el-radio v-for="item of applyDurationDict" :label="item['dictKey']">{{ item['dictValue'] }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="附加信息">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入信息"
              v-model="formData.additInfo">
          </el-input>
        </el-form-item>
        <el-form-item label="附加文件">
          <el-upload
              ref="applicationMapKeyFile"
              action="#"
              accept=".pdf,.doc,.docx"
              :limit="1"
              :multiple="false"
              :auto-upload="false"
              :on-exceed="onExceed"
              :on-change="onChange">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传pdf/word文件，且不超过5Mb</div>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="saveFile">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </template>
  </vxe-modal>
</template>

<script>
/**
 * {地图KEY 申请表单}
 *
 * @author: 宋康
 * @date: 2023/1/10
 */
import {queryDictList} from "@/api/basics";
import {saveMapApply} from '@/api/map-apply'

export default {
  name: "MapKeyApplicationForm",
  props: {
    isShow: {
      type: Boolean,
      required: true
    },
    mapServiceData: {
      type: Object,
      // required: true
    },
    mapServiceList:{
      type: Array,
      // required: true
    }
  },
  data() {
    return {
      showMapKeyApplicationForm: false,
      applyDurationDict: [],
      serviceData: {},
      serviceDataList: [],
      formData: {
        mapServiceId: '',
        duration: '1',
        additInfo: '',
        additFile: [],
      },
      ruleForm: {
        duration: [
          {required: true, message: '请选择服务时长', trigger: 'change'}
        ]
      },
    }
  },
  methods: {
    /**
     * {初始化}
     *
     * @author: 宋康
     * @date: 2023/1/9
     */
    init() {
      this.showMapKeyApplicationForm = this.isShow;
      queryDictList(['APPLY_DURATION']).then(res => {
        if (res.status) {
          const data = res.data;
          this.applyDurationDict = data['APPLY_DURATION'];
        }
      })
      this.serviceData = {
        ...this.mapServiceData
      }
      if (null == this.mapServiceList) {
        this.serviceDataList = []
        this.serviceDataList.push(this.serviceData)
      } else if (this.mapServiceList.length == 0) {
        this.serviceDataList.push(this.serviceData)
      }else{
        this.serviceDataList = {
          ...this.mapServiceList
        }
      }
    },
    /**
     * {关闭事件}
     *
     * @author: 宋康
     * @date: 2023/1/9
     */
    beforeHideMethod() {
      this.$emit('update:isShow', false);
      this.resetForm();
    },
    /**
     * {重置表单}
     *
     * @author: 宋康
     * @date: 2023/1/10
     */
    resetForm() {
      this.$refs['applicationMapKeyFile'].clearFiles();
      this.formData = {
        mapServiceId: '',
        duration: '1',
        additInfo: '',
        additFile: []
      }
    },
    /**
     * {超时文件数量钩子}
     *
     * @author: 宋康
     * @date: 2023/1/10
     */
    onExceed() {
      this.$message.error('超出文件上传数量!');
    },
    /**
     * {上传文件改变钩子}
     *
     * @author: 宋康
     * @date: 2023/1/10
     */
    onChange(file, fileList) {
      if (fileList.length > 0) {
        const fileType = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']
        if (!fileType.includes(file.raw.type)) {
          this.$message.error('上传文件类型错误!');
          fileList.splice(0.1);
          return;
        }
        if (file.size > 1024 * 1024 * 5) {
          this.$message.error('超出文件大小限制!');
          fileList.splice(0.1);
          return;
        }
      }
      this.formData.additFile = fileList;
    },
    /**
     * {提交表单}
     *
     * @author: 宋康
     * @date: 2023/1/10
     */
    saveFile() {
      this.$refs['mapKeyForm'].validate((valid) => {
        if (valid) {
          // let formData = new FormData();
          // formData.append('mapServiceId', this.serviceData.servId);
          // formData.append('duration', this.formData.duration);
          // formData.append('additInfo', this.formData.additInfo);
          // if (this.formData.additFile.length > 0) {
          //   formData.append('file', this.formData.additFile[0].raw);
          // }
          let mapServiceIds = []
          for (const serviceData in this.serviceDataList) {
            mapServiceIds.push(serviceData.resourceId)
          }
          let formData = {
            'mapServiceIds': mapServiceIds,
            // 'mapServiceId': this.serviceData.resourceId,
            'duration': this.formData.duration,
            'additInfo': this.formData.additInfo
          }
          saveMapApply(formData).then(res => {
            if (res.status) {
              this.$XModal.alert({
                content: '已发送申请',
                status: 'success',
              }).then(() => {
                this.beforeHideMethod();
              })
            } else {
              this.$message.error(res.msg);
            }
          })
        } else {
          return false;
        }
      });
    }
  },
  mounted() {
    // this.init()
  },
  watch: {
    isShow(n) {
      this.showMapKeyApplicationForm = n
      if(n){
        this.init()
      }
    },
    mapServiceData(n) {
      this.serviceData = {
        ...n
      }
    }
  }
}
</script>

<style lang="scss">
.descriptions-map-key-label-style {
  width: 86px;
  text-align: right;
}
</style>